<template>
	<view >
		<custom-navigation-bar title="数据列表"></custom-navigation-bar> 
		<view class="top01" > 
			<view class="top02"> 
				<view class="top03">
					<image src="/static/ic_home_search@3x.png" class="top04" @click="showModal"></image>
				</view>
			</view> 
		</view> 
		<view class="top05"></view> 
		<view v-if="modalVisible" class="search">
		    <view class="search_1" @click="closeModal"></view>
			<view class="search_box"> 
				<view class="search_tiem">
					<view class="search_lable">姓名</view>
					<view class="search_t"><input type="text" v-model="searchDate.name" class="search_input" placeholder="请输入输入框"/> </view>
				</view> 
				<view class="search_tiem">
					<view class="search_lable">年龄</view>
					<view class="search_t"><input type="text" v-model="searchDate.age" class="search_input" placeholder="请输入年龄"/> </view>
				</view>
				<view class="search_tiem">
					<view class="search_lable">状态</view>
					<view class="search_t">
						<view v-for="(item,index) in status" :key="index">
							<view class="search_def" v-if="item.id!=searchInitData.status" @click="selectStatus(item)">
								{{item.name}}
							</view>
							<view class="search_se" v-if="item.id==searchInitData.status" @click="selectStatus(item)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="search_tiem" style="margin-bottom: 20rpx;">
					<view class="reset_btn" @click="reset">重置</view>
					<view class="ok_btn" @click="search">确定</view>
				</view>
		    </view>
		</view>
		<!-- 商户管理 -->
		<view class="list-item"> 
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					商户管理
					<label class="status_cussess">正常</label>
					<label class="status_fail">未通过</label>
					<label class="status_def">待审核</label>
				</view>
				<view class="list-item-content-v">
					地址：山东省济宁市任城区XXXXXX
				</view>
				<view class="list-item-content-v">
					所属模块：教培团购
				</view>
				<view class="list-item-content-v">
					标签：标签1，标签2，标签3，标签4
				</view>
			</view> 
			<view class="list-item-btn-box">
				<view class="list-item-btn">
					查看信息
				</view>
				<view class="list-item-btn">
					查看商品
				</view>
			</view>
		</view>
		<!-- 商品管理 -->
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					商品名称
					<label class="status_cussess">正常</label>
					<label class="status_fail">未通过</label>
					<label class="status_def">待审核</label>
				</view>
				<view class="list-item-content-v">
					所属机构：机构名称
				</view>
				<view class="list-item-content-v">
					售价：99&nbsp;&nbsp;原价:168&nbsp;&nbsp;有效期：长期
				</view>
				<view class="list-item-content-v">
					分类：中医按摩&nbsp;&nbsp;套餐类型：体验套餐
				</view>
			</view> 
			<view class="list-item-content-v">
				&nbsp;&nbsp;重复购买：允许&nbsp;&nbsp;消费时间：周一至周日
			</view>
			<view class="list-item-btn-box"> 
				<view class="list-item-btn">
					查看商品
				</view>
			</view>
		</view>
		<!-- 社群管理 -->
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					社群管理
					<label class="status_cussess">未满</label>
					<label class="status_fail">已满</label>
				</view>
				<view class="list-item-content-v">
					所属小区：小区名称
				</view>
				<view class="list-item-content-v">
					人数：288/400&nbsp;&nbsp;类型：辣妈遛娃
				</view>
				<view class="list-item-content-v">
					创建时间：2024年6月17日10:52:20
				</view>
			</view>  
			<view class="list-item-btn-box"> 
				<view class="list-item-btn">
					编辑社群
				</view>
				<view class="list-item-btn">
					删除社群
				</view>
				<view class="list-item-btn">
					下架社群
				</view>
				<view class="list-item-btn">
					群成员
				</view>
			</view>
		</view>
		<!-- 群成员 -->
		<view class="list-item" > 
			<view class="list-item-content1" style="height: 125rpx;">
				<view class="list-item-content-v">
					昵称：张三&nbsp;&nbsp;微信号：XXXXXXX
				</view>
				<view class="list-item-content-v">
					手机号：1515000000
				</view>
				<view class="list-item-content-v">
					创建时间：2024年6月17日10:52:20
				</view> 
			</view>  
		</view>
		
		<!-- 活动管理 -->
		<view class="list-item">
			<view class="list-shop-img">
				<image src="../../static/hd1.png" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					活动管理
					<label class="status_cussess">报名中</label>
					<label class="status_fail">已完成</label>
				</view>
				<view class="list-item-content-v">
					价格：99~199&nbsp;&nbsp;所属小区：小区名称
				</view>
				<view class="list-item-content-v">
					人数：288/400&nbsp;&nbsp;类型：公益活动
				</view>
				<view class="list-item-content-v">
					创建时间：2024年6月17日10:52:20
				</view>
			</view>  
			<view class="list-item-btn-box"> 
				<view class="list-item-btn">
					编辑活动
				</view>
				<view class="list-item-btn">
					删除活动
				</view>
				<view class="list-item-btn">
					下架活动
				</view>
				<view class="list-item-btn">
					参与人
				</view>
			</view>
		</view>
		
		<!-- 参与人管理 -->
		<view class="list-item" > 
			<view class="list-item-content1" style="height: 160rpx;">
				<view class="list-item-content-v">
					昵称：张三&nbsp;&nbsp;手机号：151447410
				</view>
				<view class="list-item-content-v">
					身份证号：370811111111111
				</view>
				<view class="list-item-content-v">
					规格：成人票&nbsp;&nbsp;价格：99
				</view>
				<view class="list-item-content-v">
					创建时间：2024年6月17日10:52:20
				</view> 
			</view>  
		</view>
		
		<!-- 社区管家管理 -->
		<view class="list-item" > 
			<view class="list-item-content1" style="height: 125rpx;">
				<view class="list-item-content-v">
					昵称：张三&nbsp;&nbsp;手机号：151447410
					<label class="status_cussess">正常</label>
					<label class="status_fail">未通过</label>
					<label class="status_fail">待审核</label>
				</view>
				<view class="list-item-content-v">
					所属小区：我是一个小区
				</view> 
				<view class="list-item-content-v">
					申请时间：2024年6月17日10:52:20
				</view> 
			</view>  
		</view>
		
		<!-- 小助手管理 -->
		<view class="list-item" > 
			<view class="list-item-content1" style="height: 125rpx;">
				<view class="list-item-content-v">
					昵称：张三&nbsp;&nbsp;手机号：151447410
					<label class="status_cussess">正常</label>
					<label class="status_fail">未通过</label>
					<label class="status_fail">待审核</label>
				</view>
				<view class="list-item-content-v">
					所属小区：我是一个小区
				</view> 
				<view class="list-item-content-v">
					申请时间：2024年6月17日10:52:20
				</view> 
			</view>  
		</view>
		
		<!-- 旧物换钱门店 -->
		<view class="list-item" > 
			<view class="list-item-content1" style="height: 110rpx;">
				<view class="list-item-content-v">
					昵称：张三&nbsp;&nbsp;手机号：151447410
					<label class="status_cussess">正常</label>
					<label class="status_fail">未通过</label>
					<label class="status_fail">待审核</label>
				</view>
				<view class="list-item-content-v">
					所属小区：我是一个小区
				</view> 
				<view class="list-item-content-v">
					申请时间：2024年6月17日10:52:20
				</view> 
			</view> 
			 <view class="list-item-btn-box">
			 	<view class="list-item-btn">
			 		&nbsp;&nbsp;归库&nbsp;&nbsp;
			 	</view> 
			 </view>
		</view>
		
		<view style="width: 100%;height: 60rpx;float: left;"></view>
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'; 
	import { ref } from "vue"; 
	import http from '../../utils/http';
	const modalVisible=ref(false);
	
	function showModal() {
	    modalVisible.value = true;
	}
	function closeModal() {
	    modalVisible.value = false;
	}
	const searchInitData=ref({});
	const searchDate=ref({});
	const status=ref([
		{id:1,name:'状态1'},
		{id:2,name:'状态2'}
	]); 
	function selectStatus(item){
		searchInitData.value.status=item.id;
		searchDate.value.status=item.id;
	}
	function search(){
		closeModal();
		console.log(searchDate.value)
	}
	function reset(){
		searchDate.value={} 
		console.log(searchDate.value)
	}
</script>

<style>
	@import "./list.scss"; 
</style>